<template>
  <div class="page">
    <div class='page-search'>
      <div class="search-div">
          <!-- <div class="search-key">{{searchKey ? searchKey : '搜索你想要的商品'}}</div> -->
          <img class="icon-search" src="../../assets/icon-search.png" mode="aspectFit"/>
          <input class="search-key" type="text" placeholder="搜索你想要的商品" :value="searchKey" @change="search">
      </div>
      <div class="give-up-search" @click="closeSearch">取消</div>
    </div>
    <div class="no-goods" v-if="goodsInfo.length == 0 && searchKey" >
      <img class="no-goods-img" src="../../assets/no-goods.png" style="width:10rem">
      <div class="no-goods-font">很抱歉，没有找到合适的商品</div>
    </div>
    <div v-if="goodsInfo.length != 0" class="goods-list">
      <div class="goods-list-filter-list">
        <div :class="['filter-item',filterType === ''?'color':'']" data-type="default" @click="checkFilterType">
          <div class="filter-item-font">综合排序</div>
        </div>
        <div :class="['filter-item',[1,2].includes(filterType) ?'color':'']" data-type="price" @click="checkFilterType">
          <div class="filter-item-font">价格</div>
          <img class="filter-item-image" src="../../assets/choose-filter-up.png" v-if="filterType === 1">
          <img class="filter-item-image" src="../../assets/choose-filter-down.png" v-if="filterType === 2">
          <img class="filter-item-image" src="../../assets/no-choose-filter.png" v-if="filterType !== 1 && filterType !== 2 ">
        </div>
        <div :class="['filter-item', [3,4].includes(filterType)?'color':'']" data-type="sale" @click="checkFilterType">
          <div class="filter-item-font">销量</div>
          <img class="filter-item-image" src="../../assets/choose-filter-up.png" v-if="filterType === 3">
          <img class="filter-item-image" src="../../assets/choose-filter-down.png" v-if="filterType === 4">
          <img class="filter-item-image" src="../../assets/no-choose-filter.png" v-if="filterType !== 3 && filterType !== 4">
        </div>
      </div>
      <div v-for="(item,index) in goodsInfo" :key="index">
        <div class="goods-item">
          <div class="goods-item-img">
            <img class="image" mode="aspectFit" :src="item.picUrl">
          </div>
          <div class="goods-item-info">
            <div class="goods-name">{{item.productName}}</div>
            <div class="goods-fee">￥{{item.productPrice}}</div>
            <div class="goods-real-fee">
              <div class="icon">￥ {{item.productPromotePrice/100}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { API } from '../../config'

export default {
  name: 'Search',
  components: {

  },
  data(){
      return {
          goodsInfo:[],
          filterType:1,
          searchKey:'',
          pageNum: 1,
          pageSize: 10
      }
  },
  methods:{
      search(e){
          let vm = this
          vm.searchKey = e.target.value
          vm.getSearch()
      },
      closeSearch(){
          let vm = this
          vm.searchKey = ''
      },
      checkFilterType: function (e) {
        let vm = this
        let type = e.currentTarget.dataset.type
        if (type === 'default') {
            vm.filterType = ''
        } else if (type === 'price') {
            vm.filterType = vm.filterType === 1 ? 2 : 1
        } else if (type === 'sale') {
            vm.filterType = vm.filterType === 3 ? 4 : 3
        }
        vm.getSearch()
      },
      getSearch(){
        let vm = this
        let accesstoken = vm.getLocalStorage('accesstoken')
        let params = {
            pageNum: vm.pageNum || 1,
            pageSize: vm.pageSize,
            sortCondition: vm.filterType,
            searchKey:vm.searchKey
        }
        if (params.categoryId) {
            params.categoryId = parseInt(params.categoryId)
        }
        vm.$axios.post(API + '/searchProduct',params).then((response) => {
            if(response.data){
                vm.goodsInfo = response.data.data.data
                console.log(vm.goodsInfo)
            }
        })
      }
  }
}
</script>

<style scoped lang="less">
@import '../../css/common.less';
@import '../../css/search.less';
</style>